Step 1 of 3: Creating the User Interface

In this step you'll begin in Visual Studio to create a Silverlight grid application. You'll then continue by creating and customizing the application's user interface (UI) and adding the C1DataGrid control to your project.

To set up your project, complete the following steps:

1. In Visual Studio, select File | New | Project.

2. In the New Project dialog box, select a language in the left pane and in the templates list select Silverlight Application. Enter a Name for your project, for example "ComponentOneDataGrid", and click OK. The New Silverlight Application dialog box will appear.

3. Click OK to accept the default settings, close the New Silverlight Application dialog box, and create your project.

4. If the MainPage.xaml file is not currently open, navigate to the Solution Explorer and double-click on the MainPage.xaml item.

5. In the XAML view, locate the <UserControl> tag.

6. In the <UserControl> tag, replace Width="400" Height="300" (or d:DesignWidth="400" d:DesignHeight="300") with Width="600" Height="400".

This will increase the size of your Silverlight application.

7. Place the cursor just after the <Grid x:Name="LayoutRoot" Background="White"> tag and add the following markup:

<Grid.RowDefinitions>

</Grid.RowDefinitions>

This row definition will define the layout of your grid.

8. Add a title to your application by adding the following TextBlock just under the </Grid.RowDefinitions> tag:

9. In the XAML window of the project, place the cursor just above the </Grid> tag and click once.

10. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage.xaml. The XAML markup will now look similar to the following:

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<c1:C1DataGrid></c1:C1DataGrid>

</Grid>

</UserControl>

Note that the C1.Silverlight.DataGrid namespace and <c1:C1DataGrid></c1:C1DataGrid> tags have been added to the project.

11. If the <c1:C1DataGrid> tag includes existing content, delete it so it appears similar to the following:

<c1:C1DataGrid>

12. Give your grid a name by adding x:Name="_c1DataGrid" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="_c1DataGrid">

By giving the control a unique identifier, you'll be able to access the C1DataGrid control in code.

13. Define the location of your grid by adding Grid.Row="1" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="_c1DataGrid" Grid.Row="1">

14. Add the following markup just after the </c1:C1DataGrid> tag:

This TextBlock will be used to display status information text.

What You've Accomplished

Run your application, and observe that your page includes a title, a grid, and text below the grid. You've successfully created a basic grid application, but the grid is blank and contains no data. In the next steps you'll add a database to your project and bind the grid to a data source.